<template>
  <page class="deliver-details">
    <page-header>
      <x-header :left-options="{backText: ''}">收发货单</x-header>
    </page-header>
    <page-content :scroll="true">
      <div class="scroll-inner">
        <!--  -->
        <div class="con">
          <div class="con-c">
            <div class="title">
              <p>{{taskInfo['actAllot.allotNumber']}}</p>
              <span>{{taskInfo['actApply.actNode']}}</span>
            </div>
            <div class="detail">
              <p style="color: #4A82C6;">发货明细</p>
              <p class="detail-l hui">发货单位</p>
              <span class="detail-r"> {{info.dlvOffice.name}}</span>
              <p class="detail-l hui">发货仓库</p>
              <span class="detail-r">{{info.dlvWarehouse.name}}</span>
              <p class="detail-l hui">发货地址</p>
              <span class="detail-r"> {{info.dlvWarehouseAddr}}</span>
              <p class="detail-l hui">发货人姓名 </p>
              <span class="detail-r"> {{info.dlvUser.name}}</span>
              <p class="detail-l hui">发货人电话</p>
              <span class="detail-r"> {{info.dlvUserPhone}}</span>
              <p class="detail-l hui">收货单位 </p>
              <span class="detail-r"> {{info.takeOffice.name}}</span>
              <p class="detail-l hui">收货仓库 </p>
              <span class="detail-r"> {{info.takeWarehouse.name}}</span>
              <p class="detail-l hui">收货地址 </p>
              <span class="detail-r"> {{info.takeWarehouseAddr}}</span>
              <p class="detail-l hui">收货人姓名 </p>
              <span class="detail-r">{{info.takeUser.name}}</span>
              <p class="detail-l hui">收货人电话 </p>
              <span class="detail-r">{{info.takeUserPhone}}</span>
              <p style="color: #4A82C6;">承运明细</p>
              <p class="detail-l hui">发货时间 </p>
              <span class="detail-r">{{info.dlvTime}}</span>
              <p class="detail-l hui">承运单位 </p>
              <span class="detail-r">{{info.tranUnit}}</span>
              <p class="detail-l hui">承运车号 </p>
              <span class="detail-r">{{info.tranCarNumber}}</span>
              <p class="detail-l hui">驾驶员电话 </p>
              <span class="detail-r">{{info.driverPhone}}</span>
              <p class="detail-l hui">备注 </p>
              <span class="detail-r">{{info.remarks}}</span>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="info" v-for="item in info.pyActDeliveryLogList" :key="item.id">
          <div class="info-c">
            <p style="border-bottom: 1px dashed #d4d4d4;">设备信息</p>
            <div class="info-l">
              <div class="info-p">
                <p class="hui">设备类型：</p>
                <span>{{item.apiDeviceType}}</span>
              </div>
              <div class="info-p">
                <p class="hui">主机型号：</p>
                <span class="lan">{{item.manufacturerModel.manufacturerModel}}</span>
              </div>
              <div class="info-p">
                <p class="hui">统一编号：</p>
                <span class="lan">{{item.mainCode}}</span>
              </div>
              <div class="info-p">
                <p class="hui">设备单位：</p>
                <span class="lan">{{item.apiDeviceUnit}}</span>
              </div>
            </div>
            <div class="info-r">
              <div class="info-p">
                <p class="hui">设备名称：</p>
                <span class="lan">{{item.apiDeviceName}}</span>
              </div>
              <div class="info-p">
                <p class="hui">物料号：</p>
                <span class="lan">{{item.deviceModel.deviceModel}}</span>
              </div>
              <div class="info-p">
                <p class="hui">所属主机：</p>
                <span class="lan">{{''}}</span>
              </div>
              <div class="info-p">
                <p class="hui">申请数量：</p>
                <span>{{item.deviceCount}}</span>
              </div>
            </div>
            <p style="display: block;" class="hui">设备原值：
              <span>{{item.originalVal}}</span>
            </p>
            <p style="display: inline-block;" class="hui">备注：</p>
            <span>{{item.remarks}}</span>
          </div>
        </div>
      </div>
    </page-content>
    <page-footer>
      <div class="fix">
        <button class="qued" @click='go()'>去处理</button>
      </div>
    </page-footer>
  </page>
</template>
<script>
import { mapGetters } from 'vuex'
import { XHeader } from 'vux'
import { Loadmore } from 'mint-ui'
import { actDelivery } from '@service'

export default {
  name: 'DeliverDeatails',
  components: {
    XHeader,
    Loadmore
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token',
      taskInfo: 'task/info'
    }),
    userId () {
      return this.userInfo.id
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      info: {
        takeOffice: {},
        takeWarehouse: {},
        takeUser: {},
        dlvOffice: {},
        dlvWarehouse: {},
        dlvUser: {}
      }
    }
  },
  methods: {
    async loadData () {
      try {
        let token = this.token
        let id = this.$route.params.id
        let data = await actDelivery.showDeliveryDetail({ token, id })
        this.info = data
        console.log('======data======', data)
        return data
      } catch (error) {
        console.log(error)
      }
    },
    go () {
      let id = this.$route.params.id
      this.$router.push('/audit/' + id)
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.deliver-details {
  height: 100%;
  background: #eaeeef;

  .scroll-inner {
    padding: 1rem;
    .con {
      min-height: 21rem;
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
    }
    .con-c {
      padding: 0.5rem;
    }
    .title {
      height: 2rem;
      font-size: 0.8rem;
      border-bottom: 1px dashed #d4d4d4;
    }
    .title p {
      line-height: 2rem;
      float: left;
    }
    .title span {
      line-height: 2rem;
      float: right;
      color: #f5af41;
    }
    .detail {
      font-size: 0.8rem;
      line-height: 1.8rem;
    }
    .detail-l {
      float: left;
      width: 40%;
    }
    .detail-r {
      float: left;
      width: 60%;
    }
    .info {
      min-height: 9rem;
      background: #fff;
      margin-top: 1rem;
      border-radius: 6px;
      overflow: hidden;
    }
    .info-c {
      padding: 0.5rem;
      font-size: 0.8rem;
      line-height: 1.5rem;
    }
    .info-l {
      width: 50%;
      float: left;
    }
    .info-r {
      width: 50%;
      float: left;
    }
    .info-l p {
      display: inline-block;
    }
    .info-r p {
      display: inline-block;
    }
    .info-p {
      width: 100%;
    }
    .fix {
      width: 100%;
      height: 3rem;
      position: fixed;
      bottom: 0;
      display: flex;
    }
    .qidong {
      width: 50%;
      height: 3rem;
      background: #63758a;
      border: none;
      color: #fff;
    }
    .hui {
      color: #606063;
    }
    .hei {
      color: #606063;
    }
    .lan {
      color: #1e82d2;
    }
  }
  .qued {
    width: 100%;
    height: 3rem;
    background: #4a82c6;
    border: none;
    color: #fff;
  }
}
</style>
